<template>
  <div :id="'draw_ts_'+ pid" ref="drawTs" class="c-draw-ts"></div>
</template>
<script>
export default {
  data() {
    return {
      pid: this.getUUID()
    };
  },
  methods: {
    /**
     * 提示
     */
    doMessTs(mess, one) {
      const $dom = $('#draw_ts_' + this.pid);
      const messId = this.getUUID();
      const str = '<div id="'+ messId +'" class="mess-ts"><span>'+ mess +'</span></div>';
      if(one) {
        $dom.html(str);
      }else {
        $dom.append(str);
      }
      const $mess = $('#' + messId);
      this.doMessFit();
      $mess.addClass('show');
      setTimeout(() => {
        $mess.remove();
        this.doMessFit(true);
      }, 5000);
    },
    /**
     * 提示 适配
     */
    doMessFit(remove) {
      let top = 0;
      $('#draw_ts_'+ this.pid +' .mess-ts').each(function() {
        if(remove) {
          $(this).addClass('move');
        }
        top += 16;
        const h = $(this).outerHeight();
        $(this).css({
          top
        })
        top += h;
      });
    },
    /**
     * 生成uuid
     */
    getUUID() {
      const crypto = window.crypto || window.msCrypto;
      const array = new Uint32Array(1);
      const r = crypto.getRandomValues(array)[0] ;
      return Date.now() + '999' + r;
    }
  },
}
</script>

<style lang="scss">
  .c-draw-ts{
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 9999;
    pointer-events: none !important;
    .mess-ts{
      width: 80%;
      font-size: 14px;
      color: rgba(255, 255, 255, 0.9);
      position: absolute;
      top: 16px;
      left: 10%;
      z-index: 96;
      text-align: center;
      pointer-events: none;
      transform: translateY(-100%);
      opacity: 0;
      transition: transform 0.2s, opacity 0.2s;
      &.show{
        transform: translateY(0);
        opacity: 1;
      }
      &.move{
        transition: transform 0.2s, opacity 0.2s, top 0.2s;
      }
      span{
        display: inline-block;
        line-height: 22px;
        background: rgba(0, 0, 0, 0.7);
        border-radius: 4px;
        padding: 5px 12px;
        text-align: left;
      }
    }
  }
</style>
